<template>
  <div class="product_box">
    <!-- 1 -->
    <div class="product_child1">
      <div class="product_child1_text">{{ $t("mining.MINING") }}</div>
      <div class="product_child1_text1"></div>
      <div
        class="product_child1_text2"
        v-for="(item, index) in dataList.data"
        :key="index"
      >
        <div class="product_child1_text2_yuan">{{ numdata[index] }}</div>
        <div class="product_child1_text2_span product_child1_text2_spansss">
          {{ item.good_name }}
        </div>
        <div class="product_child1_text2_span" style="margin-top: 0">
          {{ $t("mining.POINTs1") }} {{ item.good_money }}
        </div>
        <img class="product_child1_text2_img1" :src="item.good_img" alt="" />
        <div class="product_child1_text2_span1">
          {{ item.good_describe }}
        </div>
        <div
          class="product_child1_text2_span3 cursor"
          @click="changeKey(0, index)"
        >
          {{ $t("mining.View") }}
        </div>
      </div>
    </div>
    <!-- 2 -->
    <div class="product_child1">
      <div class="product_child1_text">{{ $t("mining.Oriental") }}</div>
      <div class="product_child1_text1"></div>
      <div
        class="product_child1_text2"
        v-for="(item, index) in dataList.data2"
        :key="index"
      >
        <div class="product_child1_text2_yuan">{{ numdata[index] }}</div>
        <div class="product_child1_text2_span product_child1_text2_spansss">
          {{ item.good_name }}
        </div>
        <div class="product_child1_text2_span product_child1_text2_spanqqq">
          {{ $t("mining.POINTs1") }} {{ item.good_money }}
        </div>
        <img class="product_child1_text2_img1" :src="item.good_img" alt="" />
        <div class="product_child1_text2_span1 product_child1_text2_span1ssss">
          {{ item.good_describe }}
        </div>
        <!-- <div
          class="product_child1_text2_span2"
          style="font-size: 34px; color: #707a83; font-weight: 400"
        >
          {{ $t("mining.oMC1") }}
        </div> -->
        <div
          class="product_child1_text2_span3 cursor"
          @click="changeKey(1, index)"
        >
          {{ $t("mining.View") }}
        </div>
      </div>
    </div>
    <!-- 3 -->
    <div class="product_child1" style="height: 1000px">
      <div class="product_child1_text">{{ $t("mining.Products") }}</div>
      <div class="product_child1_text1"></div>
      <div
        class="product_child1_text2"
        v-for="(item, index) in dataList.data3"
        :key="index"
      >
        <div class="product_child1_text2_yuan">{{ numdata[index] }}</div>
        <div class="product_child1_text2_span product_child1_text2_spansss">
          {{ item.good_name }}
        </div>
        <div class="product_child1_text2_span" style="margin-top: 0">
          {{ $t("mining.POINTs1") }} {{ item.good_money }}
        </div>
        <img
          style="width: 315px; height: 315px; margin-top: 0"
          class="product_child1_text2_img1"
          :src="item.good_img"
          alt=""
        />
        <div class="product_child1_text3_span">
          {{ item.good_describe }}
        </div>
        <div
          class="product_child1_text2_span3 cursor"
          @click="changeKey(2, index)"
        >
          {{ $t("mining.View") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/product.js"; //  介绍 提现 提现记录
export default {
  data() {
    return {
      query: {
        user_id: "", // 用户id
        page: 1,
      },
      dataList: {}, // 对象
      numdata: ["A", "B", "C", "D"],
    };
  },
  created() {
    this.query.user_id = sessionStorage.getItem("id");
    this.index(this.query);
  },
  methods: {
    changeKey(id, oid) {
      if (this.query.user_id && this.query.user_id != "undefined") {
        console.log(this.query.user_id);
        if (id == 0) {
          if (oid == 0) {
            sessionStorage.setItem("oid", this.dataList.data[0].id);
          } else if (oid == 1) {
            sessionStorage.setItem("oid", this.dataList.data[1].id);
          } else if (oid == 2) {
            sessionStorage.setItem("oid", this.dataList.data[2].id);
          }
          this.$router.push({
            path: "/home/CkmBuy",
          });
        } else if (id == 1) {
          if (oid == 0) {
            sessionStorage.setItem("oid", this.dataList.data2[0].id);
          } else if (oid == 1) {
            sessionStorage.setItem("oid", this.dataList.data2[1].id);
          } else if (oid == 2) {
            sessionStorage.setItem("oid", this.dataList.data2[2].id);
          }
          this.$router.push({
            path: "/home/NFTbuy",
          });
        } else if (id == 2) {
          if (oid == 0) {
            console.log(this.dataList);
            console.log(this.dataList.data3[0].id);
            sessionStorage.setItem("oid", this.dataList.data3[0].id);
          } else if (oid == 1) {
            sessionStorage.setItem("oid", this.dataList.data3[1].id);
          } else if (oid == 2) {
            sessionStorage.setItem("oid", this.dataList.data3[2].id);
          }
          this.$router.push({
            path: "/home/BUYPOINT",
          });
        }
        this.$emit("changeKeys", id);
      } else {
        this.$message({
          type: "warning",
          message: "Please login first",
        });
      }
    },
    // 介绍详情
    async index(query) {
      try {
        const data = await index(query);
        this.dataList = data.data;
        console.log(data);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product_box {
  box-sizing: border-box;
}
.product_child1 {
  width: 100%;
  height: 922px;
}
.product_child1_text {
  margin: 61px 0 0 100px;
  height: 54px;
  font-size: 56px;
  font-family: Arial;
  font-weight: bold;
  color: #1a1a1a;
  line-height: 110px;
}
.product_child1_text1 {
  margin-top: 42px;
  width: 1918px;
  height: 2px;
  background: #bfbfbf;
}
.product_child1_text2 {
  float: left;
  width: 26%;
  margin: 50px 0 0 132px;
}
.product_child1_text2_yuan {
  float: left;
  width: 96px;
  height: 96px;
  border: 10px solid #808080;
  border-radius: 50%;
  font-size: 72px;
  font-family: Arial;
  font-weight: bold;
  color: #595959;
  text-align: center;
  line-height: 96px;
}
.product_child1_text2_span {
  margin: 26px 0 0 40px;
  float: left;
  height: 63px;
  font-size: 36px;
  font-family: Arial;
  font-weight: 400;
  color: #353840;
  line-height: 36px;
}
.product_child1_text2_img1 {
  margin: 27px 60px 0 0;
  width: 311px;
  height: 311px;
}
.product_child1_text2_span1 {
  margin: 13px 0 0 58px;
  width: 360px;
  font-size: 34px;
  font-family: Arial;
  font-weight: 400;
  color: #707a83;
}
.product_child1_text2_span2 {
  margin: 0 0 0 58px;
  font-size: 40px;
  font-family: Arial;
  font-weight: 600;
  color: block;
}
.product_child1_text2_span3 {
  margin: 41px 0 0 19px;
  width: 384px;
  height: 73px;
  background: #5b9ddb;
  border-radius: 37px;
  font-size: 48px;
  font-family: Arial;
  font-weight: 400;
  text-align: center;
  color: #f6f6f6;
  line-height: 73px;
}
.product_child1_text3_span {
  width: 482px;
  font-size: 20px;
  font-family: Arial;
  font-weight: 400;
  color: #8a939a;
  line-height: 30px;
}
.product_child1_text2_spansss {
  width: 300px;
}
.product_child1_text2_span1ssss {
  width: 100%;
}
.product_child1_text2_spanqqq {
  width: 330px;
  margin-top: 10px;
}
</style>